<template>
  <div class="app-container">

    <el-divider></el-divider>
    <div class="header">
      <div style="margin-right: 10px">点杀管理</div>
    </div>
    <div>
      <div class="killSelect">
        <el-select v-model="killvalue" placeholder="请选择" @change="selectChange">
          <el-option
            v-for="item in killOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div style="width: 10px"></div>
        <el-button type="primary" @click="killSave">点杀</el-button>
        <div v-if="killVal==0" class="dataList">
          <div style="color: red">倒计时:{{EightRoomLinkData.countdown || 0}}</div>
          <div class="dataRight">八房投入金币：
            <span>一房:{{EightRoomLinkData.InsertCoin[1] || 0}},</span>
            <span>二房:{{EightRoomLinkData.InsertCoin[2] || 0}},</span>
            <span>三房:{{EightRoomLinkData.InsertCoin[3] || 0}},</span>
            <span>四房:{{EightRoomLinkData.InsertCoin[4] || 0}},</span>
            <span>五房:{{EightRoomLinkData.InsertCoin[5] || 0}},</span>
            <span>六房:{{EightRoomLinkData.InsertCoin[6] || 0}},</span>
            <span>七房:{{EightRoomLinkData.InsertCoin[7] || 0}},</span>
            <span>八房:{{EightRoomLinkData.InsertCoin[8] || 0}}</span>
          </div>
        </div>
        <div v-if="killVal==1" class="dataList">
          <div style="color: red">倒计时:{{FiveRoomLinkData.countdown || 0}}</div>
          <div class="dataRight">五房投入金币：
            <span>一房：{{FiveRoomLinkData.InsertCoin[1] || 0}},</span>
            <span>二房：{{FiveRoomLinkData.InsertCoin[2] || 0}},</span>
            <span>三房：{{FiveRoomLinkData.InsertCoin[3] || 0}},</span>
            <span>四房：{{FiveRoomLinkData.InsertCoin[4] || 0}},</span>
            <span>五房：{{FiveRoomLinkData.InsertCoin[5] || 0}},</span>
          </div>
        </div>
        <div v-if="killVal==2" class="dataList">
          <div style="color: red">倒计时:{{TowRoomlinkData.countdown || 0}}</div>
          <div class="dataRight">二房投入金币：
            <span>一房：{{TowRoomlinkData.InsertCoin[1] || 0}},</span>
            <span>二房：{{TowRoomlinkData.InsertCoin[2] || 0}},</span>
          </div>
        </div>
      </div>
      <div style="width: 100%;margin-top: 15px;">
        <el-table
          ref="multipleTable"
          :data="KillEight"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="房间名称"
            >
            <template slot-scope="scope">{{ scope.row.roomName || '--' }}</template>
          </el-table-column>
          <el-table-column
            prop="roomId"
            label="	房间主键ID"
            >
            <template slot-scope="scope">{{ scope.row.roomId || '--' }}</template>
          </el-table-column>
          <el-table-column
            v-if="killVal!=2"
            prop="remark"
            label="	（成功/失败）"
          >
            <template slot-scope="scope">{{ scope.row.remark || '--' }}</template>
          </el-table-column>

        </el-table>
      </div>
    </div>

    <el-divider></el-divider>
    <div class="header">极速竞技游戏设置</div>
    <div>
      <el-form label-width="200px" :inline="true">
        <el-form-item label="几人开始">
          <el-input-number v-model="fastGame.startNumber" :min="1" :max="9999999"
                           label="请输入几人开始"></el-input-number>
        </el-form-item>
        <el-form-item label="抽成比率">
          <el-input-number v-model="fastGame.commissionRatio" :min="0.0001" :max="9999999"
                           label="请输入抽成比率"></el-input-number>
        </el-form-item>
<!--        <el-form-item label="获胜几率">-->
<!--          <el-input-number v-model="fastGame.deductionRatio" :min="1" :max="100" label="请输入几率"></el-input-number>-->
<!--        </el-form-item>-->
        <el-form-item label="扣减保留比率">
          <el-input-number v-model="fastGame.retentionRatio" :min="0.0001" :max="9999999"
                           label="请输入扣减保留比率"></el-input-number>
        </el-form-item>
        <el-form-item label="阶梯倍数">
          <el-input-number v-model="fastGame.stepMultiple" :min="0.0001" :max="9999999"
                           label="请输入扣阶梯倍数"></el-input-number>
        </el-form-item>
        <el-form-item label="一方投入0时高投入中奖比率">
          <el-input-number v-model="fastGame.zeroRatio" :min="0.0001" :max="9999999"
                           label="请输入一方投入0时高投入中奖比率"></el-input-number>
        </el-form-item>
        <div v-for="(item,index) in fastGame.list" :key="item.id">
          <el-form-item :label="item.twoName">
            <el-input v-model="item.twoName" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="分成比例">
            <el-input-number v-model="item.bilv" :min="0.0001" :max="9999999" label="请输入分成比例"></el-input-number>
          </el-form-item>
          <el-form-item label="获奖概率">
            <el-input-number v-model="item.probability" :min="0.0001" :max="9999999" label="请输入获奖概率"></el-input-number>
          </el-form-item>
        </div>

      </el-form>
    </div>
    <div style="margin-left: 70px">
      <el-button type="primary" @click="FastGameSubmit()">保存</el-button>
    </div>
    <el-divider></el-divider>
    <div class="header">五房游戏设置</div>
    <div>
      <el-form label-width="200px" :inline="true">
        <el-form-item label="抽成比率">
          <el-input-number v-model="fiveEscape.ratio" :min="0.001" :max="9999999"
                           label="请输入抽成比率"></el-input-number>
        </el-form-item>
        <el-form-item label="机器人投入失败房间开始金额">
          <el-input-number v-model="fiveEscape.loseStartAmount" :min="0.001" :max="9999999"
                           label="请输入机器人投入失败房间开始金额"></el-input-number>
        </el-form-item>

        <el-form-item label="机器人投入失败房间结束金额">
          <el-input-number v-model="fiveEscape.loseEndAmount" :min="0.001" :max="9999999"
                           label="请输入机器人投入失败房间结束金额"></el-input-number>
        </el-form-item>
        <el-form-item label="几人开始">
          <el-input-number v-model="fiveEscape.startNumber" :min="1" :max="9999999"
                           label="请输入几人开始"></el-input-number>
        </el-form-item>
        <el-form-item label="机器人状态">
          <el-radio-group v-model="fiveEscape.isRobot">
            <el-radio :label="1">关闭机器人</el-radio>
            <el-radio :label="2">开启机器人</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-for="(item,index) in fiveEscape.list" :key="item.id">
          <el-form-item label="杀死房间概率">
            <el-input v-model="item.probability" placeholder="请输入杀死房间概率"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="item.remark" placeholder="请输入备注"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div style="margin-left: 70px">
      <el-button type="primary" @click="fiveSubmit()">保存</el-button>
    </div>
    <el-divider></el-divider>
    <div class="header">八房游戏设置</div>
    <div>
      <el-form label-width="200px" :inline="true">
        <el-form-item label="抽成比率">
          <el-input-number v-model="eightEscape.ratio" :min="0.001" :max="9999999"
                           label="请输入抽成比率"></el-input-number>
        </el-form-item>
        <el-form-item label="机器人投入失败房间开始金额">
          <el-input-number v-model="eightEscape.loseStartAmount" :min="0.001" :max="9999999"
                           label="请输入机器人投入失败房间开始金额"></el-input-number>
        </el-form-item>

        <el-form-item label="机器人投入失败房间结束金额">
          <el-input-number v-model="eightEscape.loseEndAmount" :min="0.001" :max="9999999"
                           label="请输入机器人投入失败房间结束金额"></el-input-number>
        </el-form-item>
        <el-form-item label="几人开始">
          <el-input-number v-model="eightEscape.startNumber" :min="1" :max="9999999"
                           label="请输入几人开始"></el-input-number>
        </el-form-item>
        <el-form-item label="机器人状态">
          <el-radio-group v-model="eightEscape.isRobot">
            <el-radio :label="1">关闭机器人</el-radio>
            <el-radio :label="2">开启机器人</el-radio>
          </el-radio-group>
        </el-form-item>

        <div v-for="(item,index) in eightEscape.list" :key="item.id">
          <el-form-item label="杀死房间概率">
            <el-input v-model="item.probability" placeholder="请输入杀死房间概率"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="item.remark" placeholder="请输入备注"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div style="margin-left: 70px">
      <el-button type="primary" @click="eightSubmit()">保存</el-button>
    </div>
    <el-divider></el-divider>
    <div class="header">大逃杀日榜设置</div>
    <div>
      <el-form label-width="200px" :inline="true">
        <el-form-item label="分配的积分">
          <el-input-number v-model="dailyRanking.points" :min="0.001" :max="9999999"
                           label="请输入分配的积分"></el-input-number>
        </el-form-item>
        <el-form-item label="分配">
          <el-radio-group v-model="dailyRanking.status">
            <el-radio :label="1">固定值分配</el-radio>
            <el-radio :label="2">按照获的能量比重分配</el-radio>
          </el-radio-group>
        </el-form-item>

        <div v-for="(item,index) in dailyRanking.list" :key="item.id">
          <el-form-item label="排名">
            <el-input :disabled="true" v-model="item.number" placeholder="请输入排名"></el-input>
          </el-form-item>
          <el-form-item label="	分配比例">
            <el-input-number v-model="item.bilv" :min="0.001" :max="9999999"
                             label="请输入分配比例"></el-input-number>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div style="margin-left: 70px">
      <el-button type="primary" @click="dailyRankingSubmit()">保存</el-button>
    </div>
    <el-divider></el-divider>
    <div class="header">
      <div style="margin-right: 10px">星战裁决基础设置</div>
    </div>
    <div>
      <el-form label-width="200px" :inline="true">
        <div v-for="(item,index) in absolute" :key="item.id">
          <el-form-item label="花费金币">
            <el-select v-if="!item.isShow" v-model="item.gameConfigid" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input v-if="item.isShow" :disabled="true" v-model="item.gameConfigid"
                      placeholder="请输入花费金币主键ID"></el-input>
          </el-form-item>
          <el-form-item label="房间数量">
            <el-input-number :disabled="item.isShow" v-model="item.roomNumber" :min="1" :max="9999999"
                             label="请输入房间数量"></el-input-number>
          </el-form-item>
          <el-form-item label="抽成比例">
            <el-input :disabled="item.isShow" v-model="item.bilv" placeholder="请输入抽成比例"></el-input>
          </el-form-item>

        </div>
      </el-form>
    </div>
    <div style="margin-left: 70px">
      <el-button type="primary" @click="absoluteSubmit()" v-if="!isAbsolute">保存</el-button>
      <el-button type="primary" @click="setAbsolute()" v-if="!isAbsolute">新增</el-button>
      <el-button type="primary" @click="addAbsolute()" v-if="isAbsolute">新增保存</el-button>
      <el-button type="primary" @click="cancelAbsolute()" v-if="isAbsolute">取消新增</el-button>
    </div>

  </div>
</template>
<script>
import {
  twoGameConfigList,
  twoGameConfigUpdate,
  fiveEscapeConfig,
  eightEscapeConfig,
  escapeConfigUpdate,
  gamePointsConfig,
  gamePointsConfigUpdate,
  absoluteGameConfig,
  absoluteGameConfigUpdate,
  absoluteGameConfigSave,
  gameConfigListType,
  eightPointKillList,
  eightPointKill,
  fivePointKillList,
  fivePointKill,
  twoPointKillList,
  twoPointKill
} from "@/api/game/game";
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
import {sokeUrl} from '@/api/index/index'
import Cookies from 'js-cookie';
export default {
  data() {
    return {
      sokeUrl:sokeUrl,
      FiveRoomLinkData:{
        countdown:undefined,
        InsertCoin:[]
      },//五房链接数据
      EightRoomLinkData:{
        countdown:undefined,
        InsertCoin:[]
      },//八房链接数据
      TowRoomlinkData:{
        countdown:undefined,
        InsertCoin:[]
      },//二房链接数据
      killOptions: [{
        value: '0',
        label: '八房点杀列表'
      }, {
        value: '1',
        label: '五房点杀列表'
      }, {
        value: '2',
        label: '两房点杀列表'
      }],
      // 推广
      fastGame: [],
      fiveEscape: {},
      eightEscape: {},
      dailyRanking: {
        status: 1,
        points: '',
        list: []
      },
      absolute: [
        {
          id: null,
          gameConfigid: null,
          roomNumber: null,
          bilv: null
        }
      ],
      absoluteObj: {
        gameConfigid: 4,
        roomNumber: null,
        bilv: null
      },
      isAbsolute: false,
      isAddAbsolute: false,
      options: [],
      KillEight: [],
      killvalue: '0',
      multipleSelection: [],
      killVal:0
    }
  },
  created() {
    this.initWebSockt()
    this.getEightEscapeConfig()
    this.getFiveEscapeConfig()
    this.getFastGame()
    this.getGamePointsConfig()
    this.getAbsoluteGameConfig()
    this.getGameConfigListType()
    this.getKillEight()
  },
  methods: {
    // 创建WebSockt链接
    initWebSockt() {
      const socket = new SockJS(sokeUrl + '/gameAPI/stomp-endpoint');
      this.stompClient = Stomp.over(socket);
      // 隐藏控制台debug
      this.stompClient.debug = () => {};
      this.stompClient.connect({
          "gametype": 'fightadmin'
        },
        frame => {
          // 五房倒计时广播
          this.stompClient.subscribe('/game_topic/fiveCountdown', message => {
            this.FiveRoomLinkData.countdown = message.body
          });
          // 五房投币广播
          this.stompClient.subscribe('/game_topic/fivegameUserInfo', message => {
            let body = JSON.parse(message.body)
            this.FiveRoomLinkData.InsertCoin = body.data
          });
          // 八房倒计时广播
          this.stompClient.subscribe('/game_topic/eightCountdown', message => {
            this.EightRoomLinkData.countdown = message.body
          });
          // 八房投币广播
          this.stompClient.subscribe('/game_topic/eightgameUserInfo', message => {
            let body = JSON.parse(message.body)
            this.EightRoomLinkData.InsertCoin = body.data
          });
          // 二房倒计时广播
          this.stompClient.subscribe('/game_topic/twoCountdown', message => {
            this.TowRoomlinkData.countdown = message.body
          });
          // 二房投币广播
          this.stompClient.subscribe('/game_topic/twoInvestCurrency', message => {
            let body = JSON.parse(message.body)
            this.TowRoomlinkData.InsertCoin = body.data
          });
        },
        (error) => {
          this.$message.error('连接失败，稍后重试');
        },
      );
    },
    // 点杀操作
    killSave(){
      if(this.killVal==0){
        this.setEightPointKill()
      }
      if(this.killVal==1){
        this.setFivePointKill()
      }
      if(this.killVal==2){
        this.setTwoPointKill()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item=>item.roomId);
    },
    // 选择点杀房间
    selectChange(val){
      this.killVal = val
      if(val==0){
        this.getKillEight()
      }
      if(val==1){
        this.getKillfive()
      }
      if(val==2){
        this.getKillTow()
      }
    },
    async setTwoPointKill(){
      if(this.multipleSelection.length==2){
        this.$message({
          message: '最少保留一个房间',
          type: 'warning'
        });
        return
      }
      await twoPointKill({roomId:this.multipleSelection.toString()})
      this.$message({
        message: '点杀成功',
        type: 'success'
      });
    },
    // 5房点杀
    async setFivePointKill(){
      if(this.multipleSelection.length==5){
        this.$message({
          message: '最少保留一个房间',
          type: 'warning'
        });
        return
      }
      await fivePointKill({list:this.multipleSelection})
      this.$message({
        message: '点杀成功',
        type: 'success'
      });
      this.getKillfive()
    },
    // 8房点杀
    async setEightPointKill(){
      if(this.multipleSelection.length==8){
        this.$message({
          message: '最少保留一个房间',
          type: 'warning'
        });
        return
      }
      await eightPointKill({list:this.multipleSelection})
      this.$message({
        message: '点杀成功',
        type: 'success'
      });
      this.getKillEight()
    },
    // 两房点杀查询
    async getKillTow(){
      let res = await twoPointKillList()
      this.KillEight = res.data.map(item=>{
        return{
          roomName:item.twoGame,
          roomId:item.twoId
        }
      })
    },
    // 五房点杀查询
    async getKillfive(){
      let res = await fivePointKillList()
      this.KillEight = res.data
    },
    // 八房点杀查询
    async getKillEight() {
      let res = await eightPointKillList()
      this.KillEight = res.data
    },
    async getGameConfigListType() {
      this.options = []
      let res = await gameConfigListType()
      this.options = res.data.map(item => {
        return {
          value: item.id,
          label: item.gameAmount
        }
      })
    },
    // 星战裁决取消新增
    cancelAbsolute() {
      this.isAbsolute = !this.isAbsolute
      this.isAddAbsolute = !this.isAddAbsolute
      this.absolute.forEach((item) => {
        item.isShow = false
      })
      this.absolute.pop()
    },
    // 新增星战裁决保存
    async addAbsolute() {
      await absoluteGameConfigSave(this.absolute[this.absolute.length - 1])
      this.isAbsolute = !this.isAbsolute
      this.isAddAbsolute = !this.isAddAbsolute
      this.absolute.forEach((item) => {
        item.isShow = false
      })
      this.$message({
        message: '新增成功',
        type: 'success'
      });
    },
    // 新增星战裁决
    setAbsolute() {
      this.isAbsolute = !this.isAbsolute
      this.isAddAbsolute = !this.isAddAbsolute

      this.absolute.forEach((item) => {
        item.isShow = true
      })
      this.absolute.push({
        gameConfigid: null,
        roomNumber: null,
        bilv: null
      })
    },

    // 游戏管理-星战裁决基础设置修改
    async absoluteSubmit() {
      await absoluteGameConfigUpdate({list: this.absolute})
      this.$message({
        message: '修改成功',
        type: 'success'
      });
    },
    // 获取星战裁决基础设置
    async getAbsoluteGameConfig() {
      let res = await absoluteGameConfig()
      this.absolute = res.data.map((item) => {
        return {
          ...item,
          isShow: false
        }
      })
    },
    // 大逃杀日榜设置
    async dailyRankingSubmit() {
      await gamePointsConfigUpdate(this.dailyRanking)
      this.$message({
        message: '修改成功',
        type: 'success'
      });
    },
    // 获取大逃杀日榜
    async getGamePointsConfig() {
      let res = await gamePointsConfig()
      this.dailyRanking = res.data
    },
    // 八房保存
    async eightSubmit() {
      await escapeConfigUpdate(this.eightEscape)
      this.$message({
        message: '修改成功',
        type: 'success'
      });
    },
    // 五房保存
    async fiveSubmit() {
      await escapeConfigUpdate(this.fiveEscape)
      this.$message({
        message: '修改成功',
        type: 'success'
      });
    },

    // 八房获取数据
    async getEightEscapeConfig() {
      let res = await eightEscapeConfig()
      this.eightEscape = res.data
    },
    // 五房获取数据
    async getFiveEscapeConfig() {
      let res = await fiveEscapeConfig()
      this.fiveEscape = res.data
    },
    // 疾速获取
    async getFastGame() {
      let res = await twoGameConfigList()
      this.fastGame = res.data
    },
    // 保存
    async FastGameSubmit() {
      await twoGameConfigUpdate(this.fastGame)
      this.$message({
        message: '修改成功',
        type: 'success'
      });
    },

  }
}
</script>
<style scoped lang="scss" scoped>
.dataRight{
  margin-left: 20px;
}
.dataList{
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.killSelect {
  display: flex;
  align-items: center;
}

.header {
  margin-left: 10px;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
</style>
